{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "products/vpn/download.html" %}

{% block canonical_urls %}<meta name="robots" content="noindex,nofollow">{% endblock %}

{% block page_title_full %}{{ ftl('vpn-windows-download-page-title') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('mozilla-vpn-platform-download') }}
{% endblock %}

{% block content %}
  <div class="vpn-platform-download">
    {% if block_download %}
      <header class="platform-download-header">
        <div class="mzp-l-content platform-download-blocked" data-testid="vpn-download-blocked-message">
        <img src="{{ static('img/products/vpn/download/vpn-unavailable-country.svg') }}" alt="">
        <h1>{{ ftl('vpn-download-unable-to-download') }}</h1>
        <p>{{ ftl('vpn-download-not-in-country') }}</p>
        </div>
      </header>
    {% endif %}

    {% if not block_download %}
    <header class="platform-download-header">
      <div class="mzp-l-content platform-download-header-wrapper">
        <div class="vpn-logo">
          <img src="{{ static('img/logos/vpn/vpn-dark-logo.svg') }}" alt="">
        </div>
        <h1>{{ ftl('vpn-windows-downloading-mozilla-vpn') }}</h1>
        <p>{{ ftl('vpn-your-download-should-start', url=windows_download_url, id='vpn-download-link-win') }}</p>
      </div>
    </header>
    <section class="vpn-download-instructions windows mzp-l-content" data-testid="vpn-download-instructions">
      <ol class="mzp-l-columns mzp-t-columns-three">
        {% call picto(
          base_el='li',
          title=ftl('vpn-open-the-file'),
          image=resp_img(
            url='img/products/vpn/download/vpn-file-windows-500.png',
            srcset={
              'img/products/vpn/download/vpn-file-windows-700.png': '2x'
            },
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
          ) %}
          <p>{{ ftl('vpn-windows-go-to-your-downloads') }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=ftl('vpn-launch-the-app'),
          image=resp_img(
            url='img/products/vpn/download/windows-installer-500.png',
            srcset={
              'img/products/vpn/download/windows-installer-700.png': '2x',
            },
            optional_attributes={
              'class': 'mzp-c-picto-image windows-launch-img',
              'loading': 'lazy'
            }
          ),
          body=True,
          ) %}
          <p>{{ ftl('vpn-windows-a-progress-bar') }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=ftl('vpn-login-or-signup'),
          image=resp_img(
            url='img/products/vpn/download/vpn-app-windows-500.png',
            srcset={
              'img/products/vpn/download/vpn-app-windows-700.png': '2x',
            },
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
          ) %}
          <p>{{ ftl('vpn-enter-your-email') }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=ftl('vpn-turn-on-vpn'),
          image=resp_img(
            url='img/products/vpn/download/vpn-app-on-windows-500.png',
            srcset={
              'img/products/vpn/download/vpn-app-on-windows-700.png': '2x',
            },
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
          ) %}
          <p>{{ ftl('vpn-pick-a-recommended') }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=ftl('vpn-install-firefox-extension'),
          image=resp_img(
            url='img/products/vpn/download/vpn-firefox-extension-500.png',
            srcset={
              'img/products/vpn/download/vpn-firefox-extension-700.png': '2x',
            },
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
          ) %}
          <p>{{ ftl('vpn-download-and-install', extension='https://addons.mozilla.org/firefox/addon/mozilla-vpn-extension/?utm_medium=referral&utm_source=mozilla-vpn-website&utm_campaign=evergreen&utm_content=thank-you-page') }}</p>
        {% endcall %}
      </ol>
    </section>
  </div>
  {% include 'products/vpn/includes/download-faq.html' %}
  {% endif %}
  <footer class="vpn-footer">
      {% include 'products/vpn/includes/footer-legal.html' %}
  </footer>
{% endblock %}

{% block js %}
  {% if not block_download %}
    {{ js_bundle('vpn_platform_download') }}
  {% endif %}
{% endblock %}
